<template>
    <div class="member02">
        <div class="title">
            <h1>教务管理 &gt; 教务列表 </h1>
        </div>
        <div class="search">
            <el-input v-model="keyword" class="search-input" placeholder="请输入">
                <template #prefix>
                    <el-icon class="input__icon"><search /></el-icon>
                </template>
            </el-input>
            <el-select v-model="selectValue" 
            class="search-select"
            placeholder="请选择"
            size="small">
                <el-option
                v-for="item in SelectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
        </div>
        <div class="list">
            <el-table :data="eduAdminData" 
            border 
            style="width: 100%"
            height="600px"
            stripe=true
            type=index
            >
                <el-table-column prop="id" label="#" />
                <el-table-column prop="account" label="账号" />
                <el-table-column prop="pwd" label="密码" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="department" label="教研部" sortable/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-popconfirm
                            confirm-button-text="确定"
                            cancel-button-text="不,谢谢"
                            :icon="InfoFilled"
                            icon-color="red"
                            title="你真的要删除这个用户吗?"
                            @confirm="confirmDelelte(scope.row._id)"
                        >
                            <template #reference>
                                <el-button type="danger" :icon="DeleteFilled" plain  >删除</el-button>
                            </template>
                        </el-popconfirm>
                        
                        <el-button type="success"  
                        @click="showUpdateDialog(scope.row)" 
                        :icon="Edit"
                        plain 
                        >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="修改教务信息"
            width="35%"
            :before-close="updateClose"
        >
            <el-form
                :model="form"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                ref="myfrom"
            >
                <el-form-item label="账号" prop="account">
                <el-input 
                v-model="form.account" 
                type="userword"
                clearable
                placeholder="请输入教务账号"
                    :prefix-icon="User"
                    />
                </el-form-item>
                <el-form-item label="名字" prop="name">
                <el-input 
                v-model="form.name" 
                type="text"
                clearable
                placeholder="请输入姓名"
                    :prefix-icon="User"
                    />
                </el-form-item>
                
                    <el-form-item label="密码" prop="paw">
                    <el-input
                        v-model="form.paw"
                        type="password"
                        clearable
                        placeholder="请输入密码"
                        :prefix-icon="Lock"
                        show-password
                        @blur="checkdbpassword"
                    />
                    </el-form-item>
                <el-form-item label="确认密码" prop="dbpassword">
                <el-input
                    v-model="form.dbpassword"
                    type="password"
                    clearable
                    placeholder="请再次输入密码"
                    :prefix-icon="Lock"
                    show-password
                
                />
                </el-form-item>
                <el-form-item label="教研部" prop="dep">
                <div class="radio">
                    <el-radio-group 
                    fill="#ff6700"
                    @change="mustRedio"
                    v-model="radio1" size="small">
                    <el-radio-button  label="语文教研部" />
                    <el-radio-button label="数学教研部" />
                    <el-radio-button label="外语教研部" />
                    </el-radio-group>
                </div>
            </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="updateClose">取消</el-button>
                    <el-button type="warning" @click="submitUpdateForm"
                    >修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import {ajax} from "@/api"
import { Search } from '@element-plus/icons-vue'
export default {
    components:{
        Search
    },
    setup(props) {
        const state=reactive({
            eduAdminData:[],
            dialogVisible:false,
            form:{}
        })
        const handleEdit=()=>{

        }
        const handleDelete=()=>{

        }
        const confirmDelelte = (id) => {
            console.log(id)

        }
        const showUpdateDialog = (row)=>{
            state.dialogVisible = true;
            state.form = {...row}
        }
        const getList=async()=>{
            let res = await ajax.getList({tableName:"jiaowus"})
            console.log(res.data);
            res.data.forEach((v,i) => {
                state.eduAdminData.push({
                    id: i+1,
                    _id:v._id,
                    account:v.account,
                    pwd:v.paw,
                    name: v.name,
                    department:v.dep,
                })
            });
        }
        onMounted(()=>{
            getList()
        })
        //关闭弹框  updateClose
        const updateClose = ()=>{
                    state.dialogVisible = false;
                }
        const keyword = ref('')
        const selectValue = ref('')
        const SelectOptions=[
            {
                value: 'language',
                label: '语文教研部',
            },
            {
                value: 'math',
                label: '数学教研部',
            },
            {
                value: 'foreign',
                label: '外语教研部',
            },
        ]
        return{
            ...toRefs(state),
            SelectOptions,
            selectValue,
            keyword,
            handleEdit,
            handleDelete,
            confirmDelelte,
            showUpdateDialog,
            updateClose
        }
    }
}
</script>
<style lang="scss" scoped>

.member02{
    .title{
        font-size: 15px;
        font-weight: bold;
    }
    .search{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        .search-input{
            width: 200px;
            display: flex;
            align-items: center;
            .input__icon{
                margin-top: 8px;
            }
        }
    }
}
    
</style>